<template>
  <div class="flex_center">
    <div class="bodyContent">
      <div id="search">
        <div class="search search_choosed search_map_head flex flex_vertical_center flex_between" style="">
          <i style="color: #2d2d2d" class="fa fa-chevron-left for-map" v-on:click="toMain"></i>
          <input type="text" id="search_address" class="search_address" v-model="addressLike" style="font-size: 0.8rem;color: #2d2d2d;border: none;height: 2rem!important;background: #f1f1f1" placeholder="请输入搜索地址(如：xx市xx)">
        </div>
        <div class="searchAddressList">
          <div class="content" id="choose_search" v-for="port in search_nearPost" v-on:click="chooseAddress(port)">
            <div class="address-choose-search white_bac">
              <div class="address">
                <p style="font-weight: bold">{{port.title}}</p>
                <p style="color: #9a9a9a">{{port.address}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import city3 from '../../../assets/js/city.data-3'
  export default {
    props:['mapAddress','region'],
    data(){
      return{
        addressLike:'',
        search_nearPost:'',
        addressItem:'',
        shopCity:'',
        area_info:'',
        province_id:'',
        city_id:'',
        area_id:'',
        province:'',
        city:'',
        area:'',
        address:''

      }
    },
    name: "search-address-list",
    mounted(){
      this.initH();
      this.$nextTick(function () {
        $('#search_address').focus()
      })
    },
    methods:{
      initH(){
        var allH = document.documentElement.clientHeight;
        var heardH = $('.search_map_head ').height();
        var h = allH - heardH;
        $('.searchAddressList').css('height',h+'px');
      },
      chooseAddress:function (obj) {
        this.center = obj.location;
        this.province = obj.province||'';
        this.city = obj.city||'';
        this.area = obj.district||'';
        this.area_info = this.province +' '+ this.city +' '+this.area;
        this.address = obj.title;

      },

      toMainAndElv(){
        this.mapAddress.area_position = this.center.lat+','+this.center.lng;
        this.mapAddress.address = this.address;
        this.mapAddress.area_info = this.area_info;
        this.mapAddress.province_id = this.province_id;
        this.mapAddress.city_id = this.city_id;
        this.mapAddress.area_id = this.area_id;
        this.$emit('getMapAddress', this.mapAddress);
        //直接显示主页面
        this.toMain();
      },

      toMain(){
        this.$emit('mapSearch', 0)//直接显示主页面
      },
    },
    watch:{
      addressLike:{
        handler:function(val,oldval){
          var self = this;
          if(self.isEmpty(self.region)){
            self.region = self.shopCity;
          }
          var url = 'https://apis.map.qq.com/ws/place/v1/suggestion/?region='+self.region+'&keyword='+val+'&output=jsonp&key=RHHBZ-K26W6-CPISS-ENGXG-HVCRS-QJFQT';
          url = encodeURI(url);
          $.ajax({
            type:"get",
            url: url,
            dataType: "JSONP",
            jsonp: 'callback',
            success: function (res) {
              self.search_nearPost = res.data;
            },
            error: function (res,reson) {
              mui.toast('请求失败');
            }
          });
        },
        deep:true
      },

      //3  这个不需要深层次监听
      area_info(curVal,oldVal){
        var _self = this;

        var cityData3 = city3.cityData3;

        if(cityData3 == undefined || cityData3 == null || cityData3 == '' || cityData3.length <=0){
          return;
        }
        for(var i=0;i<cityData3.length;i++){
          var data = cityData3[i];
          if(data.text == _self.province){
            _self.province_id = data.value
            var children = data.children;
            if(children != undefined && children != null && children != '' && children.length > 0){
              for(var j = 0;j<children.length;j++){
                if(children[j].text == _self.city){
                  _self.city_id = children[j].value
                  children = children[j].children;
                  if(children != undefined && children != null && children != '' && children.length > 0){
                    for(var m =0;m<children.length;m++){
                      if(children[m].text == _self.area){
                        _self.area_id = children[m].value;
                        _self.toMainAndElv();
                        break;
                      }else if(m >= children.length -1){
                        _self.area_id = _self.city_id;
                        _self.toMainAndElv();
                      }
                    }
                  }else {
                    _self.area_id = _self.city_id;
                    _self.toMainAndElv();
                  }
                  break;
                }else if(j >= children.length -1){
                  _self.city_id = _self.area_id = _self.province_id;
                  _self.toMainAndElv();
                }
              }
            }else {
              _self.city_id = _self.area_id = _self.province_id;
              _self.toMainAndElv();
            }
            break;
          }
        }
      },
    }
  }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  @import "../css/searchAddressList.css";
  #choose_search{
    padding: 0.3rem 1rem;
  }
</style>
